<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_469234_75w2sx3ezem.css"/>

		<style type="text/css">
			
			html{
				height: 100%;
				width: 100%;
			}
			#div {
				width: 0px;
				height: 0px;
				background: red;
				position: fixed;
				top: 70%;
				left: 50%;
			}
			
			.mui-popover .mui-popover-arrow:after {
				width: 0px;
			}
			
			.mui-popover{
				height: 80%;
				width: 80%;
				    display: block;
			    top: 57px;
			    left: 32px;
			    background: #FFF;
			}
			
			.mui-popover .head{
				height: 44px;
			    background: #29a1f7;
			    border-radius: 6px 7px 0px 0px;
			    line-height: 44px;
			    color: #FFF;
			    text-align: center;
			}
			
			.mui-popover .content{
				overflow: auto;
                height: 90%;
			}
			
			.item{
				padding: 0 5%;
				height: 50px;
                background: #FFF;
                display: flex;
                font-size: 14px;
               border-bottom: 1px solid #efefef;
                padding-top: 4px;
			}
			
			.iconImg{
				flex: 3;
			}
			
			.warnNum{
				flex: 6;
			}
			
			.warndate{
				flex: 6;
				font-size: 12px;
                color: #999;
			}
			
			.warndate div{
				text-align: right;
			}
			
			.warnNum div:nth-child(1){
				font-size: 14px;
				color: #000;
			}
			
			.warnNum div:nth-child(2) {
			    font-size: 12px;
			    color: #444343;
			}
			
			.iconImg .icon-ziyuan2{
			    font-size: 28px;
			    text-align: center;
			   line-height: 45px;
			}
			
			.warnDail{
				overflow: hidden;
			    background: #f7f7f7;
			    padding: 3px 9%;
			    font-size: 13px;
			    text-align: justify;
			    color: #666;
			    display: none;
			}
			
			.warnDail .label{
				font-size: 13px;
				color: #333;
			}
			
			.warnType{
				display: flex;
			}
			
			.warnType span:nth-child(1){
				flex: unset;
			}
			.warnType span:nth-child(2){
				flex: 1;
			}
			
			#closeBtn{
				    float: right;
               margin-right: 5px;
			}
			
			
			 .content::-webkit-scrollbar {
		        width: 5px;
		        height: 16px;
		        background-color: #F5F5F5;
		    }
		
		    /*定义滚动条轨道 内阴影+圆角*/
		    .content::-webkit-scrollbar-track {
		        -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
		        border-radius: 10px;
		        background-color: #F5F5F5;
		    }
		
		    /*定义滑块 内阴影+圆角*/
		    .content::-webkit-scrollbar-thumb {
		        border-radius: 10px;
		        -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3);
		        background-color: #CCC;
		    }
		    /* 定义滚动条样式 End */
		</style>

	
	</head>

	<body>

	    <header class="mui-bar mui-bar-nav">
	        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	        <h1 class="mui-title">弹出层</h1>
	    </header>
	    
		<div class="mui-content">
			<a id="alert">点击此打开中间的弹出层</a>
		</div>
		<!--<div id="div"></div>-->
		
		
		<div id="popover" class="mui-popover" >
			<div class="mui-popover-arrow"></div>
			<div class="head">
				济南站点：A2123153123123 
				<span id="closeBtn" class="iconfont icon-guanbi2"></span>
			</div>
			<div class="content">
				
				<div class="item">
					<div class="iconImg">
						<i class="iconfont icon-ziyuan2" style="color: #f79703;"></i>
					</div>
					<div class="warnNum">
						<div>2018091719046432 </div>
						<div>三级告警</div>
					</div>
					<div class="warndate">
						<div>09-28  16:40</div>
						<div>PM10</div>
					</div>
				</div>
				
				<div class="warnDail">
					
					<div class="warnType"><span class="label">告警类型： </span><span>P-M-Q-01</span></div>
					<div class="warnDailing"><span class="label">告警详情： </span><span>
						正向异常在最近20分钟内值编号趋
						正向异常正向异常在最近20分钟内值编号趋势
						向异常 
					</span></div>
				</div>
				
				<div class="item">
					<div class="iconImg">
						<i class="iconfont icon-ziyuan2" style="color: #f79703;"></i>
					</div>
					<div class="warnNum">
						<div>2018091719046432 </div>
						<div>三级告警</div>
					</div>
					<div class="warndate">
						<div>09-28  16:40</div>
						<div>PM10</div>
					</div>
				</div>
				
				<div class="warnDail">
					
					<div class="warnType"><span class="label">告警类型： </span><span>P-M-Q-01</span></div>
					<div class="warnDailing"><span class="label">告警详情： </span><span>
						正向异常在最近20分钟内值编号趋
						正向异常正向异常在最近20分钟内值编号趋势
						向异常 
					</span></div>
				</div>
				
				<div class="item">
					<div class="iconImg">
						<i class="iconfont icon-ziyuan2" style="color: #f79703;"></i>
					</div>
					<div class="warnNum">
						<div>2018091719046432 </div>
						<div>三级告警</div>
					</div>
					<div class="warndate">
						<div>09-28  16:40</div>
						<div>PM10</div>
					</div>
				</div>
				
				<div class="warnDail">
					
					<div class="warnType"><span class="label">告警类型： </span><span>P-M-Q-01</span></div>
					<div class="warnDailing"><span class="label">告警详情： </span><span>
						正向异常在最近20分钟内值编号趋
						正向异常正向异常在最近20分钟内值编号趋势
						向异常 
					</span></div>
				</div>
				
				<div class="item">
					<div class="iconImg">
						<i class="iconfont icon-ziyuan2" style="color: #f79703;"></i>
					</div>
					<div class="warnNum">
						<div>2018091719046432 </div>
						<div>三级告警</div>
					</div>
					<div class="warndate">
						<div>09-28  16:40</div>
						<div>PM10</div>
					</div>
				</div>
				
				<div class="warnDail">
					
					<div class="warnType"><span class="label">告警类型： </span><span>P-M-Q-01</span></div>
					<div class="warnDailing"><span class="label">告警详情： </span><span>
						正向异常在最近20分钟内值编号趋
						正向异常正向异常在最近20分钟内值编号趋势
						向异常 
					</span></div>
				</div>
				
				
				
			</div>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-1.10.2.js"></script>
		<script type="text/javascript">
			mui.init() 
			document.getElementById("alert").addEventListener("tap", function() {	
				mui("#popover").popover('toggle', document.getElementById("div"));
			})
			
			
			$(".item").on("click",function(){
				$(this).next().toggle();
			})
			
			$('#closeBtn').on('click',function(){
				mui('#popover').popover('hide');
			})
		
		</script>

	</body>

</html>